<template>
  <div class="box">
      <div class="feedback-box">
          <van-field
            v-model="message"
            rows="1"
            :autosize="{maxHeight: 400, minHeight: 130 }"
            label="您的问题或建议："
            type="textarea"
            placeholder="请简要描述你在使用产品过程中的问题和意见"
          />
          <van-field
            v-model="tel"
            label="您的联系方式："
            type="number"
            placeholder="请输入联系电话"
          />
          <van-field
            v-model="mail"
            label="您的邮箱（选填）："
            type="mail"
            placeholder="请输入邮箱地址"
          />
          <p class="feedback-prompt">请留下您的联系方式，以便我们能够方便了解问题以及您反馈问题结果。</p>
          <button>提交</button>
      </div>
  </div>
</template>

<script>
export default {
    name:'Feedback',
    data(){
        return{
            message:'',
            tel:'',
            mail:''
        }
    }
}
</script>

<style lang="scss" scoped>
 @import "@/assets/css/public";
.box{
    background-color: $gray_bg;
    padding-top:vw(20);
}
.feedback-prompt{
    padding:0 vw(20);
    font-size: vw(28);
    line-height: vw(42);
}
button{
    position: absolute;
    bottom:vw(40);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 9.3vw);
    height: vw(80);
    border-radius: vw(40);
    font-size: vw(36);
    font-weight: bold;
    color:#fff;
    background: $orgGradientBg;
}
</style>